<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css" />
  <link rel="stylesheet" href="./static/css/typo.css">
  <link rel="stylesheet" href="./static/css/animate.css">
  <link rel="stylesheet" href="./static/css/prism.css">
  <link rel="stylesheet" href="./static/package/toc/tocbot.css">
  <link rel="stylesheet" href="./static/css/me.css" />
  <title>Document</title>
</head>

<body>
  <!-- 导航 -->
  <nav class="ui inverted attached segment m-padded-tb-mini .m-shadow-small">
    <div class="ui container">
      <div class="ui inverted secondary animated stackable menu">
        <h2 class="ui teal header item">Giser</h2>
        <a href="#" class="item m-mobile-hide m-item"><i class="home icon"></i>首页</a>
        <a href="#" class="item m-mobile-hide m-item"><i class="idea icon"></i>分类</a>
        <a href="#" class="item m-mobile-hide m-item"><i class="tag icon"></i>标签</a>
        <a href="#" class="item m-mobile-hide m-item"><i class="clone icon"></i>归档</a>
        <a href="#" class="item m-mobile-hide m-item"><i class="info icon"></i>关于</a>
        <div class="right item m-mobile-hide m-item">
          <div class="ui inverted icon transparent input">
            <input type="text" placeholder="Search....." />
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu black icon button m-right-top m-menu m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>
  <!-- 中间 -->
  <div id="waypoint" class="m-container-small m-padded-tb-big animate__animated animate__fadeInUp">
    <div class="ui container">
      <div class="ui top attached segment">
        <div class="ui horizontal link list">
          <div class="ui item">
            <img src="https://unsplash.it/50/50" alt="" class="ui avatar image" />
            <div class="content">
              <a href="#" class="ui header">heike</a>
            </div>
          </div>
          <div class="ui item"><i class="calendar icon"></i>2022-1-30</div>
          <div class="ui item"><i class="eye icon"></i> 2323</div>
        </div>
      </div>
      <div class="ui attached segment">
        <img src="https://unsplash.it/350/200" alt="" class="ui fluid rounded image" />
      </div>
      <!-- 内容 -->
      <div class="ui attached segment">
        <div class="ui right aligned basic segment">
          <div class="ui orange basic label">原创</div>
        </div>
        <h2 class="ui center aligned header">标题</h2>
        <div id="content" class="typo js-toc-content typo-selection m-padded-lr">
          <h1>中文网页重设与排版：<i class="serif">Typo.css</i></h1><br />

          <h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>
          <pre><code class="language-css">p { color: red }</code></pre>
          <ol id="table">
            <li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>
            <li><a href="#section2">排版实例</a>
              <ul>
                <li><a href="#section2-1">例1：论语学而篇第一</a></li>
                <li><a href="#section2-2">例2：英文排版</a></li>
              </ul>
            </li>
            <li><a href="#section3">附录</a>
              <ul>
                <li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>
                <li><a href="#appendix2">开源许可</a></li>
              </ul>
            </li>
          </ol>

          <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

          <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
          <h4>现状和如何去做：</h4>

          <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1">#
                附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS
            中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
            Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

          <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
          <table class="ui table" summary="Typo.css 的测试平台列表">
            <thead>
              <tr>
                <th>OS/浏览器</th>
                <th>Firefox</th>
                <th>Chrome</th>
                <th>Safari</th>
                <th>Opera</th>
                <th>IE9</th>
                <th>IE8</th>
                <th>IE7</th>
                <th>IE6</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>OS X</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
              </tr>
              <tr>
                <td>Win 7</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>-</td>
              </tr>
              <tr>
                <td>Win XP</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
                <td>-</td>
                <td>✔</td>
                <td>✔</td>
                <td>✔</td>
              </tr>
              <tr>
                <td>Ubuntu</td>
                <td>✔</td>
                <td>✔</td>
                <td>-</td>
                <td>✔</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
              </tr>
            </tbody>
          </table>

          <h4>中文排版的重点和难点</h4>

          <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em
              class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
            HTML5 被<a href="//html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i>
            也根据实际情况提供相应的方案。我们重要要注意的两点是：
          </p>
          <ol>
            <li>语义：语义对应的用法和样式是否与中文排版一致</li>
            <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
          </ol>
          <p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
          <blockquote>
            <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
          </blockquote>
        </div>

        <!-- 标签 -->
        <div class="m-padded-lr">
          <a href="#" target="_blank" class="ui teal basic label">java</a>
        </div>

        <!-- 赞赏 -->
        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange circular basic button">赞赏</button>
        </div>
        <div id="payQR" class="ui flowing popup transition hidden">
          <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit !important">
              <div class="image">
                <img src="./static/images/wechat.png" alt="" class="ui rouned bordered image" style="width: 120px" />
                <div>支付宝</div>
              </div>
              <div class="image">
                <img src="./static/images/wechat.png" alt="" class="ui rouned bordered image" style="width: 120px" />
                <div>微信</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- blog信息 -->
      <div class="ui attached positive message">
        <div class="ui middle aligned grid">
          <div class="eleven wide column">
            <ui class="list">
              <li class="item">作者：heike</li>
              <li class="item">发表时间：2023-1-31 11:31</li>
              <li class="item">版权声明：自由转载-非商用-非衍生-保持著名</li>
              <li class="item">公众号转载：请在文末添加作者公众号二维码</li>
            </ui>
          </div>
          <div class="five wide column">
            <img src="./static/images/wechat.png" alt="" class="ui right floated rouned bordered image"
              style="width: 110px;">
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div id="comment-container" class="ui bottom attached segment">
        <div class="ui teal segment">
          <div class="ui comments">
            <h3 class="ui dividing header">Comments</h3>
            <div class="comment">
              <a class="avatar">
                <img src="https://unsplash.it/50/50">
              </a>
              <div class="content">
                <a class="author">Matt</a>
                <div class="metadata">
                  <span class="date">Today at 5:42PM</span>
                </div>
                <div class="text">
                  How artistic!
                </div>
                <div class="actions">
                  <a class="reply">回复</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a class="avatar">
                <img src="https://unsplash.it/50/50">
              </a>
              <div class="content">
                <a class="author">Elliot Fu</a>
                <div class="metadata">
                  <span class="date">Yesterday at 12:30AM</span>
                </div>
                <div class="text">
                  <p>This has been very useful for my research. Thanks as well!</p>
                </div>
                <div class="actions">
                  <a class="reply">回复</a>
                </div>
              </div>
              <div class="comments">
                <div class="comment">
                  <a class="avatar">
                    <img src="https://unsplash.it/50/50">
                  </a>
                  <div class="content">
                    <a class="author">Jenny Hess</a>
                    <div class="metadata">
                      <span class="date">Just now</span>
                    </div>
                    <div class="text">
                      Elliot you are always so right :)
                    </div>
                    <div class="actions">
                      <a class="reply">回复</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a class="avatar">
                <img src="https://unsplash.it/50/50">
              </a>
              <div class="content">
                <a class="author">Joe Henderson</a>
                <div class="metadata">
                  <span class="date">5 days ago</span>
                </div>
                <div class="text">
                  Dude, this is awesome. Thanks so much
                </div>
                <div class="actions">
                  <a class="reply">回复</a>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="ui form">
          <form class="ui reply form">
            <div class="field">
              <textarea name="content" placeholder="请输入评论内容....."></textarea>
            </div>
            <div class="ui padded fields">
              <div class="ui field m-mobile-wide m-margin-bottom-small">
                <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input type="text" name="nickName" placeholder="昵称">
                </div>
              </div>
              <div class="ui field m-mobile-wide m-margin-bottom-small">
                <div class="ui left icon input">
                  <i class="mail icon"></i>
                  <input type="text" name="nickName" placeholder="昵称">
                </div>
              </div>
              <div class="ui field m-mobile-wide m-margin-bottom-small">
                <button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 工具条 -->
  <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none;">
    <div class="ui vertical icon buttons">
      <button id="toc" class="ui teal button">目录</button>
      <a href="#comment-container" class="ui teal button">留言</a>
      <button id="wechat" class="ui icon button"><i class="wechat icon"></i></button>
      <button id="toTop" class="ui button"><i class="chevron up icon"></i></button>
    </div>
  </div>
  <div id="toc-container" class="ui flowing popup transition hidden" style="width: 250px;">
    <ol class="js-toc"></ol>
  </div>
  <div id="QRCode" class="ui flowing popup transition hidden" style="width: 130px;">
    <!-- <img src="./static/images/wechat.png" alt="" class="ui rouned bordered image" style="width: 120px" /> -->
  </div>
  <!-- 底部 -->
  <footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui stackable inverted divided grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="./static/images/wechat.png" class="ui rounded image" style="width: 110px" alt="" srcset="" />
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">用户故事（User Story）</a>
            <a href="#" class="item">数组遍历</a>
            <a href="#" class="item">js对象</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Email：giser_km@qq.com</a>
            <a href="#" class="item">QQ：1551660674</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opcity-mini">
            这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助.
          </p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opcity-tiny">Copyright &copy; 2020-2023 Giser Designed by Giser</p>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
  <script src="./static/js/prism.js"></script>
  <script src="./static/package/toc/tocbot.min.js"></script>
  <script src="./static/package/QRCode/qrcode.min.js"></script>
  <script src="./static/package/waypoints/jquery.waypoints.min.js"></script>
  <script>

    $(".m-menu").click(() => {
      $(".m-item").toggleClass("m-mobile-hide");
    });
    $('#payButton').popup({
      popup: $('#payQR'),
      on: 'click',
      position: 'bottom center'
    })

    $('#toc').popup({
      popup: $('#toc-container'),
      on: 'click',
      position: 'left center'
    })

    $('#wechat').popup({
      popup: $('#QRCode'),
      position: 'left center'
    })

    tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.js-toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '.js-toc-content',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3',
    });


    var qrcode = new QRCode(document.getElementById("QRCode"), {
      text: "http://jindo.dev.naver.com/collie",
      width: 110,
      height: 110,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H
    });


    $('#toTop').click(() => {
      $(window).scrollTo(0, 500)
    })


    var waypoint = new Waypoint({
      element: document.getElementById('waypoint'),
      handler: function (direction) {
        if (direction == 'down') {
          $('#toolbar').show(500)
        } else {
          $('#toolbar').hide(500)
        }
      }
    })
  </script>
</body>

</html>